<template>
  <!-- 时间控件 -->
  <div class="form">
    <el-form :inline="true" :model="elform" class="demo-form-inline" size="mini">
      <el-form-item>
        <el-radio v-model="timeradio" label="1" @change="handleRadio">按时段</el-radio>
        <el-radio v-model="timeradio" label="2" @change="handleRadio">按日</el-radio>
        <el-radio v-model="timeradio" label="3" @change="handleRadio">按月</el-radio>
      </el-form-item>
      <template v-if="timeradio == '1'">
        <el-form-item label="开始日期:">
          <el-date-picker
            style="width: 130px"
            v-model="startDate"
            value-format="yyyy-MM-dd"
            type="date"
            size="mini"
            :clearable="false"
            @change="chageTime"
          ></el-date-picker>
          <el-time-picker
            v-if="isTime"
            style="width: 110px"
            v-model="startTime"
            value-format="HH:mm:ss"
            size="mini"
            :clearable="false"
            @change="chageTime"
          ></el-time-picker>
        </el-form-item>
        <el-form-item label="结束日期:">
          <el-date-picker
            style="width: 130px"
            v-model="endDate"
            value-format="yyyy-MM-dd"
            type="date"
            size="mini"
            :clearable="false"
            @change="chageTime"
          ></el-date-picker>
          <el-time-picker
            v-if="isTime"
            style="width: 110px"
            v-model="endTime"
            value-format="HH:mm:ss"
            size="mini"
            :clearable="false"
            @change="chageTime"
          ></el-time-picker>
        </el-form-item>
      </template>
      <template v-if="timeradio == '2'">
        <el-form-item label="日期:">
          <el-date-picker
            v-model="dayTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            size="mini"
            @change="chageDayTime"
            style="width: 140px"
            :clearable="false"
          ></el-date-picker>
        </el-form-item>
      </template>
      <template v-if="timeradio == '3'">
        <el-form-item label="月份:">
          <el-date-picker
            v-model="monthTime"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择月"
            @change="chageMonthTime"
            style="width: 110px"
            :clearable="false"
          ></el-date-picker>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
import bus from '@/bus.js'
export default {
  data() {
    return {
      // 时间快捷方式
      timeradio: '1',
      dayTime: '',
      monthTime: '',
      elform: {},
      startDate: '',
      endDate: '',
      startTime: '',
      endTime: ''
    }
  },
  props: {
    isTime: {
      type: Boolean,
      default: true
    }
  },

  created() {
    this.startDate = this.getNowTime('yy-mm-dd')
    this.endDate = this.getNowTime('yy-mm-dd')
    this.startTime = '00:00:00'
    this.endTime = '23:59:59'
  },
  methods: {
    /**
     * 时间快捷方式
     */
    handleRadio(val) {
      console.log(val)
      if (val == '1') {
        this.startDate = this.getNowTime('yy-mm-dd')
        this.endDate = this.getNowTime('yy-mm-dd')
        this.startTime = '00:00:00'
        this.endTime = '23:59:59'
      } else if (val == '2') {
        this.dayTime = this.getNowTime('yy-mm-dd')
        this.startDate = this.getNowTime('yy-mm-dd')
        this.endDate = this.getNowTime('yy-mm-dd')
        this.startTime = '00:00:00'
        this.endTime = '23:59:59'
        console.log(this.dayTime)
      } else if (val == '3') {
        this.monthTime = this.getNowTime('yy-mm')
        this.startDate = this.getNowTime('yy-mm-01')
        let timeArr = this.startDate.split('-')
        let endDay = '-' + new Date(timeArr[0], timeArr[1], 0).getDate()
        this.endDate = timeArr[0] + '-' + timeArr[1] + endDay
        this.startTime = '00:00:00'
        this.endTime = '23:59:59'
        console.log(this.monthTime)
      }
      this.$emit('handleGetTime', {
        startDate: this.startDate,
        startTime: this.startTime,
        endDate: this.endDate,
        endTime: this.endTime,
        timeradio: this.timeradio
      })
    },
    // 按时段时切换时间
    chageTime(val) {
      this.$emit('handleGetTime', {
        startDate: this.startDate,
        startTime: this.startTime,
        endDate: this.endDate,
        endTime: this.endTime,
        timeradio: this.timeradio
      })
    },
    // 按日时切换时间
    chageDayTime(val) {
      this.$emit('handleGetTime', {
        startDate: this.dayTime,
        startTime: '00:00:00',
        endDate: this.dayTime,
        endTime: '23:59:59',
        timeradio: this.timeradio
      })
    },
    // 按月时切换时间
    chageMonthTime(val) {
      console.log(val)
      let timeArr = this.monthTime.split('-')
      // let endTime = '-31'
      console.log(timeArr)
      let endDay = '-' + new Date(timeArr[0], timeArr[1], 0).getDate()
      console.log(endDay)
      this.$emit('handleGetTime', {
        startDate: this.monthTime + '-01',
        startTime: '00:00:00',
        endDate: this.monthTime + endDay,
        endTime: '23:59:59',
        timeradio: this.timeradio
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form {
  .el-radio {
    margin-right: 20px;
  }
  .el-radio + .el-radio {
    margin-left: 0;
  }
  .el-form.el-form--inline {
    width: 100%;
    display: inline-block;
  }

  display: inline-block;
}

.demo-form-inline,
.demo-form-inline1 {
  padding-left: 10px;
  /deep/.el-form-item__label {
    // padding-right: 5px;
  }
  .el-form-item {
    margin-bottom: 5px;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 340px;
  }
}
</style>